
@for $i from 10 through 72
{
    .fs-#{$i}
    {
        font-size:($i*1px);
    }
}
@for $i from 0 through 24
{
    .col-#{$i}
    {
        width:($i/24*100%);
        float: left;
    }
    .col-span-#{$i}{
      margin-left: ($i/24*100%);
    }
    @media screen and (max-width:750px){
        .col-mob-#{$i}
        {
          width:($i/24*100%);
          float:left;
        }
        .col-mob-span-#{$i}{
          margin-left: ($i/24*100%);
        }
    }
    @if $i<=20 {
      .col-20-#{$i}{
        width:($i/20*100%);
        float: left;
      }
      .col-20-span-#{$i}{
        margin-left: ($i/20*100%);
      }
      @media screen and (max-width:750px){
        .col-20-mob-#{$i}
        {
          width:($i/20*100%);
          float: left;
        }
        .col-20-mob-span-#{$i}{
          margin-left: ($i/20*100%);
        }
      }
    }
}
// screen size
@mixin maxWidth($name:1400){
  .w#{$name}{
    max-width: $name*1px;
    margin-left: auto;
    width: 100%;
    margin-right: auto;
    @media screen and (max-width:#{$name}px){
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
@include maxWidth(1400);
@include maxWidth(1360);
@include maxWidth(1320);
@include maxWidth(1200);
@include maxWidth(1000);
@include maxWidth(945);
@include maxWidth(850);
@include maxWidth(780);
@include maxWidth(800);
@include maxWidth(630);